<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 800px;
        height: 300px;
        background: url(1.jpg);
        margin: 100px auto;
    }
    .box polyline{
    	stroke: red;
    	fill: none;
    	stroke-width:3;
    	transition: all 500ms;
    	stroke-dasharray: 2040px;
    	stroke-dashoffset: 2040px;
    }
    .box:hover polyline{
    	stroke-dashoffset: 0px;
    }
    </style>
</head>

<body>
    <div class="box">
    	<svg width="800" height="300">
			<polyline points="20,20 780,20 780,280 20,280 20,20"></polyline>
    	</svg>
    </div>
</body>

</html>